<template>
  <view class="main">
    <view class="header">
      <view class="count-hint" @click="dialogShow = true">
        <text class="iconfont icon-rule"></text>
        <text>积分规则</text>
      </view>
      <view class="count-num">{{ userPointCount }}</view>
      <view class="count-desc">当前可使用积分</view>
    </view>
    <view class="page-content">
      <view class="list" v-for="(item, index) in queryResult.list" :key="index" >
        <Detailed :detailed="item" type="point" />
      </view>
    </view>
    <HintDialog type="pointRule" :show="dialogShow" @cancel="()=> {dialogShow = false}"/>
  </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { useStore } from 'vuex'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { userPointDetailApi } from '@/api/user'
import Detailed from "@/components/detailed/detailed.vue";
import HintDialog from "@/components/hintDialog/index.vue";
const store = useStore()
const userPointCount = computed(()=> {
  return store.state.user.userPointCount
})
const dialogShow = ref(false)
const queryResult = reactive({
  isLast: false,
  isQueryed: false,
  list: []
})
const queryData = reactive({
  page: 1,
  size: 10
})

onLoad(()=> {
  init()
})
onReachBottom(()=> {
  loadNextPage()
})
async function loadNextPage(){
  if(queryResult.isLast) {
    return
  }
  queryData.page += 1;
  getListData()
}
async function init() {
  queryData.page = 1;
  queryResult.isLast = false
  store.dispatch('user/getUserPointCount')
  await getListData()
}
async function getListData(){
  if(queryResult.isLast) {
    return
  }
  uni.showLoading()
  const res = await userPointDetailApi({...queryData}).finally(()=> {
    uni.hideLoading()
    setTimeout(()=>{
      queryResult.isQueryed = true
    })
  })
  if(queryData.page === 1) {
    queryResult.list = [...res.items]
  } else {
    queryResult.list.push(...res.items)
  }
  queryResult.isLast = queryResult.list.length === res.total

}

</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background: #F4F6F8;
  padding-bottom: 100rpx;
  .header{
    position: relative;
    width: 750rpx;
    height: 320rpx;
    background: url('https://oss.cqxzx.com/c1928b3f13aac6d295e276bdf991c77e.png?Expires=2036326257&OSSAccessKeyId=LTAI5t5a98jUcHvqdxwzahgm&Signature=t6lO2wkz4TmIDXrocr5HHrU8pnY%3D');
    //background: linear-gradient( 152deg, #0097F6 3%, #0169EA 100%);
    background-size: contain;
    padding-top: 99rpx;
    text-align: center;
    .count-hint{
      position: absolute;
      right: 0;
      top: 32rpx;
      width: 172rpx;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(233,233,233,0.4);
      border-radius: 55rpx 0rpx 0rpx 55rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #FFFFFF;
      gap: 10rpx;
    }
    .count-num{
      font-weight: 700;
      font-size: 98rpx;
      color: #FFFFFF;
      line-height: 1;
      margin-bottom: 16rpx;
    }
    .count-desc{
      font-weight: 400;
      font-size: 26rpx;
      color: #FFFFFF;
      line-height: 34rpx;
    }
  }
  .page-content{
    padding: 0 32rpx;
    background: #fff;
    .list{
      padding: 32rpx 0;
      background: #fff;
      border-bottom: 1px solid #D8D8D8;
      &:last-child{
        border-bottom: none;
      }
    }
  }

}
</style>
